<template>
	<div class="toast" v-if="msg">
		{{msg}}
	</div>
</template>

<script>
	// 当文本 msg为空的时候 提示隐藏，有文本的时候显示
	export default {
		data() {
			return {
				msg: ""
			} //提示的文本
		},
		methods: {
			show(str = "加载中...",delay=2000) {
				this.msg = str;
				// 先手等待2秒隐藏
				setTimeout(() => this.hide(), delay)
			},
			hide() {
				this.msg = "";
			}
		}
	}
</script>

<style scoped="scoped">
	.toast {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding: 15px;
		border-radius: 4px;
		color: #fff;
		background-color: rgba(0, 0, 0, .4);
		z-index: 10000;
	}
</style>
